<template>
	<div class="container">
		<div class="cont">
			<div class="label">是否开启商品审核</div>
			<el-switch v-model="form.isReview" active-text="是" inactive-text="否" inline-prompt @change="change"/>
		</div>
		<div class="cont">
			<div class="label">是否开启微信登录</div>
			<el-switch v-model="form.isWxLogin" active-text="是" inactive-text="否" inline-prompt @change="change"/>
		</div>
		<div class="cont">
			<div class="label">默认头像</div>
			<el-upload action="" :show-file-list="false" :before-upload="uploadFace" :limit="1" accept="image/*">
				<img v-if="form.avatar&&form.avatar!=''" :src="form.avatar" class="avatar" />
				<view class="uploader" v-else><el-icons name="plus"/></view>
			</el-upload>
		</div>
	</div>
</template>
<script lang="ts">
	import {reactive ,onMounted,getCurrentInstance} from "vue";
	import { ElMessage } from "element-plus";
	export default({
		setup() {
			const that=getCurrentInstance().appContext.config.globalProperties

			const form = reactive({
				isReview:false,
				isWxLogin:false,
				avatar:''
			});

				
			const change=(e,type)=>{
				that.$post('sys/edit',{
					isReview:form.isReview,
					isWxLogin:form.isWxLogin,
					avatar:form.avatar
				}).then(res => {
					if (res.code !== 200) {
						ElMessage.error(res.msg)
					}
				})
			}

			const uploadFace = (file) => {
				that.$uploadImg(file)
				.then(res => {
					if(res.code==200){
						form.avatar=res.data.path
						change()
					}else{
						ElMessage.error(res.msg)
					}
				})
				return false//加上这个，不用走到action的自动上传
			}
			onMounted(() => {
				that.$get('sys/list')
				.then(res => {
					if (res.code == 200) {
						form.isReview=res.data.isReview
						form.isWxLogin=res.data.isWxLogin
						form.avatar=res.data.avatar
					}else{
						ElMessage.error(res.msg)
					}
				})
			})
			
			return {
				change,
				form,
				uploadFace,
			}
		},
		created(){
			console.log('created')
		},
		berforeCreated(){
			console.log('berforeCreated')
		},
		mounted(){
			console.log('mounted')
		},
		berforeMounted(){
			console.log('berforeMounted')
		},
		updated(){
			console.log('updated')
		},
		berforeUpdated(){
			console.log('berforeUpdated')
		},
		destroyed(){
			console.log('destroyed')
		},
		berforeDestroyed(){
			console.log('berforeDestroyed')
		}
	})
</script>
<style lang="scss" scoped>
	.container {
		background-color: #fff;
		padding: 0 20px;
		box-sizing: border-box;
		.cont{
			display: flex;
			font-size: 15px;
			padding: 15px 0;
			.label{
				width: 120px;
				text-align: right;
				margin: 5px 20px 0 0;
			}
			.uploader{
				width: 100px;
				height: 100px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #d9d9d9;
				font-size: 20px;
			}
			.avatar{
				width: 100px;
				height: 100px;
			}
		}
	}
</style>
